<template>
  <div class="app-container">
    链接到各种示例模板
    <router-link to="/example/form/index">
      <el-dropdown-item>基础表单</el-dropdown-item>
    </router-link>
    <router-link to="/example/form/media">
      <el-dropdown-item>多媒体表单</el-dropdown-item>
    </router-link>

    <router-link to="/example/form/verification">
      <el-dropdown-item>表单验证</el-dropdown-item>
    </router-link>

    <router-link to="/example/table/table-list/index">
      <el-dropdown-item>店滴列表数据+检索+分页</el-dropdown-item>
    </router-link>

    <router-link to="/example/table">
      <el-dropdown-item>传统列表数据+检索+分页</el-dropdown-item>
    </router-link>

    <router-link to="/example/table/table-list/view">
      <el-dropdown-item>详情</el-dropdown-item>
    </router-link>
  </div>
</template>

<script>
import {
  fetchList
} from 'diandi-admin/lib/api/example/article.js'
import {
  FormatDate
} from '@/filters/index.js'
export default {
  name: 'ArticleList',
  components: { },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    formatterDate(val) {
      if (val) {
        return FormatDate(val, 'yyyy-MM-dd hh:mm:ss')
      } else {
        return '-'
      }
    }
  },
  data() {
    return {
      // 表格数据 start
      tableColumns: [{
        label: '类型',
        prop: 'cate',
        width: 150,
        align: 'center',
        render: (h, {
          row
        }) => {
          return h('el-tag', {}, row.cate ? row.cate.title : '系统')
        }
      },
      {
        label: '标题',
        type: 'slot',
        slot: 'title',
        prop: 'title'
      },
      {
        label: '简介',
        prop: 'description'
      },
      {
        label: '创建时间',
        type: 'slot',
        slot: 'create_time',
        prop: 'create_time'
      }
      ],
      // 表格操作项
      tableHandle: [{
        label: '修改',
        type: 'primary',
        isPop: false,
        method: row => {
          this.editItem(row)
        }
      },
      {
        label: '删除',
        type: 'danger',
        isPop: true,
        method: row => {
          this.deleteItem(row)
        }
      }
      ],
      // 检索 start
      filterInfo: {
        data: {
          page: 1,
          pageSize: 20,
          name: '',
          parent_id: '',
          description: ''
          // sex: 1,
          // date: null,
          // dateTime: null,
          // range: null
        },
        fieldList: [{
          label: '文章名称',
          type: 'input',
          value: 'WebsiteArticle[title]'
        },
        {
          label: '文章类型',
          type: 'select',
          value: 'WebsiteArticle[pcate]',
          list: 'articleCate'
        }
        ]
      },

      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.dataProvider.allModels
        this.total = response.data.dataProvider.total
        this.listLoading = false
      })
    },
    handleSelectionChange() {},
    handleEdit() {
      this.$router.push({ name: 'example-edit' })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
